<script setup>
import { ref, watch } from "vue"

const props = defineProps({
    isDialog: Boolean,
    imgUrl: String,
    title:String,
    width:String
})
const emit = defineEmits(['exit'])

const isShow = ref(props.isDialog)
watch(() => props.isDialog, () => {
    isShow.value=props.isDialog
})
watch(() => isShow.value, () => {
    !isShow.value?emit('exit'):null
})
</script>

<template>
    <el-dialog style="padding: 0;borderRadius: 16px;" v-model="isShow" :width="props.width">
        <div class="endbox">
            <h2>{{ props.title }}</h2>
            <img draggable="false" :src="props.imgUrl" alt="">
        </div>
    </el-dialog>
</template>
<style lang="scss" scoped>
.endbox{
    margin-top: 4px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2{
        text-align: center;
        font-size: 20px;
        font-weight: normal;
        line-height: 23.4px;
        color: #132241;
    }
    img{
        width: 90%;
        margin: 40px 0 50px;
    }
}
</style>